<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <TableLayout form-title=""> 
                <el-form :model="formInline" ref="formInline" class="formInline" label-width="90px" :rules="rules" label-position="right" slot="form" v-collapse="true">          
                    <el-row :gutter="41">
                        <el-col :span="8">
                            <el-form-item label="银行卡姓名">
                                <el-input v-model="formInline.accountName" placeholder="请输入银行卡姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="银行卡号">
                                <el-input v-model="formInline.bankCard" placeholder="请输入银行卡号"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="8">
                            <el-form-item label="用户名">
                                <el-input v-model="formInline.username" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8">
                            <el-form-item label="手机号码" prop="phone">
                              <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>                
                    <el-row :gutter="41">
                        <el-col :span="8">
                            <el-form-item label="e学云ID号" prop="exueCode">
                                <el-input v-model="formInline.exueCode" placeholder="请输入e学云ID号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="当前进度">
                                <el-select v-model="formInline.status" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in formInline.progressList" :key="item.value" :label="item.value" :value="item.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="申请日期" label-width="90px">
                                <el-row>  
                                    <el-col :span="11">
                                        <el-date-picker :editable="false" :clearable="true" :state="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                        </el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">至</el-col>
                                    <el-col :span="11">
                                        <el-date-picker :editable="false" :clearable="true" :state="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                        </el-date-picker>
                                    </el-col> 
                                </el-row>                
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="top-line">
                        <el-col :span="4" :offset="20"> 
                            <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="table-title" slot="table-title">
                    <div class="btnPosition">
                        <el-button  @click="exportBtn">导出</el-button>
                    </div>
                </div>
                <el-table border ref="multipleTable" :data="dataList"  style="width: 100%" v-loading="loading" tooltip-effect="dark" @selection-change="handleSelectionChange">
                    <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
                    <el-table-column align="center" label="申请时间">
                        <template scope = "scope">
                            {{scope.row.applyTime === null? '--': scope.row.applyTime.substr(0,16)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户名">
                        <template scope = "scope">
                            {{scope.row.username === null? '--': scope.row.username}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="银行卡姓名">
                        <template scope = "scope">
                            {{scope.row.accountName === null? '--': scope.row.accountName}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="银行卡信息">
                        <template scope = "scope">
                            <el-button @click="btnMsg(scope.row)" type="text" class="btn">详情</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="提现金额（元）">
                        <template scope = "scope">
                            {{scope.row.money === null ? '--' : scope.row.money | moneySwitch}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="当前进度">
                        <template scope = "scope">
                            {{scope.row.schedule === null? '--': scope.row.schedule}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="处理中操作">
                        <template scope = "scope">
                            <el-button v-if="scope.row.status == '1006'" @click="btnTransfer(scope.row)" type="text" class="btn">转账确认</el-button>
                            <el-button v-else-if="scope.row.status == '1005'" @click="btnDispose(scope.row)" type="text" class="btn">待处理</el-button>
                            <el-button v-else-if="scope.row.status == '1002' || scope.row.status == '1003' || scope.row.status == '1001'" v-loading="upLoading" @click="btnRefresh(scope.row)" type="text" class="btn">刷新查询</el-button>
                            <!-- <el-button v-else type="text" class="text-block">-</el-button> -->
                            <span v-else>--</span>
                            <!-- <el-button @click="btnTransfer(scope.row)" type="text" class="btn">转账确认</el-button>
                            <el-button @click="btnDispose(scope.row)" type="text" class="btn">待处理</el-button>
                            <el-button v-loading="upLoading" @click="btnRefresh(scope.row)" type="text" class="btn">刷新查询</el-button> -->
                        </template>
                    </el-table-column>
                    <el-table-column align="left" min-width="100" label="其他操作">
                        <template scope = "scope">
                            <el-button @click="btnProcess(scope.row)" type="text" class="btn">查看进程</el-button>
                            <el-button @click="btnDetails(scope.row)" type="text" class="btn">更多信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container" style="text-align:right">
                        <el-pagination
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listQuery.total"
                            :current-page.sync="listQuery.page"
                            :page-sizes="config.pageSizes"
                            :page-size="config.pageSize"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                </div>
            </TableLayout>
        </div>
        <!-- 查看进程 -->
        <mentionBtnprocess v-if="modifyProcess.dialogFormVisible" :modifyProcess="modifyProcess"></mentionBtnprocess>

        <!-- 查看详情 -->
        <mentionMsg v-if="modifyMsg.dialogFormVisible" :modifyMsg="modifyMsg"></mentionMsg>

        <!-- 银行卡信息 -->
        <mentionbtnMsg v-if="modifyBtnMsg.dialogFormVisible" :modifyBtnMsg="modifyBtnMsg"></mentionbtnMsg>
        <!-- 转账确认 -->
        <mentionBtntransfer @sortTransfer="sortTransfer" v-if="modifyTransfer.dialogFormVisible" :modifyTransfer="modifyTransfer"></mentionBtntransfer>

        <!-- 待处理 -->
        <mentiondispose @sortDispose="sortDispose" v-if="modifyDispose.dialogFormVisible" :modifyDispose="modifyDispose"></mentiondispose>

    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayouts';
import { mapState, mapActions, mapGetters } from 'vuex';
import moment from 'moment';
import mentionBtnprocess from './comps/mentionBtnprocess';
import mentionMsg from './comps/mentionMsg';
import mentionBtntransfer from './comps/mentionBtntransfer';
import mentiondispose from './comps/mentiondispose';
import mentionbtnMsg from './comps/mentionbtnMsg';
import { detail, refreshQuery } from 'api/mentionManagement';
import validate from '@/utils/validate';
export default {
    name: 'agentTransfer',
    components: {
        TableLayout,
        Levelbar,
        mentionBtnprocess,
        mentionMsg,
        mentionBtntransfer,
        mentiondispose,
        mentionbtnMsg
    },
    data() {
        return {
            activeName: 'mentionTransfer',
            formInline: {
                accountName: '',
                phone: '',
                bankCard: '',
                username: '',
                exueCode: '',
                status: '',
                progressList: [
                    {
                        label: '',
                        value: '全部'
                    },
                    {
                        label: '1006',
                        value: '本笔交易需由【人工】转账'
                    },
                    {
                        label: '1008',
                        value: '线下转账成功'
                    },
                    {
                        label: '1007',
                        value: '线下转账失败'
                    },
                    {
                        label: '1001',
                        value: '向银行发送转账申请'
                    },
                    {
                        label: '1005',
                        value: '转账失败，请处理'
                    },
                    {
                        label: '1002',
                        value: '银行正在处理，请稍后查询'
                    },
                    {
                        label: '1003',
                        value: '查询失败，请手动刷新查询'
                    },
                    {
                        label: '1004',
                        value: '银行转账成功'
                    }
                ],
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {}
            },
            upLoading: false,
            loading: false,
            dataList: [],
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            multipleSelection: [],
            modifyProcess: {
                dialogFormVisible: false
            },
            modifyMsg: {
                dialogFormVisible: false
            },
            modifyArea: {
                dialogFormVisible: false
            },
            modifyTransfer: {
                dialogFormVisible: false
            },
            modifyDispose: {
                dialogFormVisible: false
            },
            modifyBtnMsg: {
                dialogFormVisible: false
            },
            rules: {
                exueCode: [...validate.exueCode()],
                phone: [...validate.phone()]
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['token'])
    },
    watch: {
    // 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = [];
            this.multipleSelection.push(item.pId);
        },
    // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },

    // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },
        schoolChange(e) {
            this.formInline.schoolId = e;
        },
        searchFetchData() {
            this.loading = true;
            let startDate =
        this.formInline.startDate == ''
          ? ''
          : moment(this.formInline.startDate).format('YYYY-MM-DD'); // 开始时间格式处理
            let endDate =
        this.formInline.endDate == ''
          ? ''
          : moment(this.formInline.endDate).format('YYYY-MM-DD'); // 结束时间格式处理

            detail(
        this.listQuery.page,
        this.config.pageSize,
        '3',
        this.formInline.accountName,
        this.formInline.phone,
        this.formInline.bankCard,
        this.formInline.username,
        this.formInline.exueCode,
        startDate,
        endDate,
        this.formInline.status
      )
        .then(data => {
            this.loading = false;
            this.dataList = data.data.content.list;
            this.listQuery.total = data.data.content.pagination.total;
        })
        .catch(Error => {
            this.loading = false;
        });
        },
        onSubmit(formInline) {
            this.$refs[formInline].validate(valid => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        exportBtn() {
            let startDate =
        this.formInline.startDate == ''
          ? ''
          : moment(this.formInline.startDate).format('YYYY-MM-DD'); // 开始时间格式处理
            let endDate =
        this.formInline.endDate == ''
          ? ''
          : moment(this.formInline.endDate).format('YYYY-MM-DD'); // 结束时间格式处理
            if (this.dataList.length > 0) {
                window.location.href = `${
          LOCAL_API.ly
        }/withdrawal/exportTransferDetail?page=${this.listQuery.page}&rows=${
          this.config.pageSize
        }&flag=3&accountName=${this.formInline.accountName}&phone=${
          this.formInline.phone
        }&bankCard=${this.formInline.bankCard}&username=${
          this.formInline.username
        }&exueCode=${
          this.formInline.exueCode
        }&startTime=${startDate}&endTime=${endDate}&status=${
          this.formInline.status
        }&AccessToken=${this.token}`;
            } else {
                this.$message({
                    message: '当前没有数据！',
                    type: 'warning'
                });
            }
        },
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
    // 查看进程
        btnProcess(e) {
            this.modifyProcess.dialogFormVisible = true;
            this.modifyProcess.pId = e.pId;
        },
    // 详情
        btnDetails(e) {
            this.modifyMsg.dialogFormVisible = true;
            this.modifyMsg.userId = e.userId;
            this.modifyMsg.pId = e.pId;
        },
    // 初审更新
        sortTrial(e) {
            if (!e) {
                console.log('没数据')
            } else {
        // 发现传递过来数据，刷新父组件的数据
                this.searchFetchData();
            }
        },
        btnMsg(e) {
            this.modifyBtnMsg.dialogFormVisible = true;
            this.modifyBtnMsg.accountName = e.accountName;
            this.modifyBtnMsg.bankCard = e.bankCard;
            this.modifyBtnMsg.bankName = e.bankName;
            this.modifyBtnMsg.subBankName = e.subBankName;
            this.modifyBtnMsg.money = e.money;
        },
        btnArea(e) {
            this.modifyArea.dialogFormVisible = true;
            this.modifyArea.orgUserId = e.orgUserId;
        },
        btnTransfer(e) {
            this.modifyTransfer.dialogFormVisible = true;
            this.modifyTransfer.pId = e.pId;
        },
        sortTransfer(e) {
            if (!e) {
                console.log('111');
            } else {
                console.log('222');
        // 发现传递过来数据，刷新父组件的数据
                this.searchFetchData();
            }
        },
        btnDispose(e) {
            this.modifyDispose.dialogFormVisible = true;
            this.modifyDispose.pId = e.pId;
            this.modifyDispose.reason = e.reason;
        },
        sortDispose(e) {
            if (!e) {
                console.log('没数据')
            } else {
        // 发现传递过来数据，刷新父组件的数据
                this.searchFetchData();
            }
        },
        btnRefresh(e) {
            this.upLoading = true;
            refreshQuery(e.pId)
        .then(data => {
            setTimeout(() => {
                this.upLoading = false;
                this.searchFetchData();
            }, 3000);
        })
        .catch(Error => {
            this.upLoading = false;
        });
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
}
.content {
  position: relative;
  padding: 0px;
  $bgcolor: #fff;
  .incomeTime {
    position: relative;
    padding-left: 10px;
    &::before {
      content: "*";
      position: absolute;
      left: 14px;
      top: 10px;
      color: #ff4949;
    }
  }
  .timeState {
    font-size: 12px;
    color: #ff4949;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .withdrawals {
    width: 100%;
    background: #fff;
    padding: 30px 100px;
    margin-bottom: 20px;
    box-shadow: 0px 1px 2px #999;
    -webkit-box-shadow: 0px 1px 2px #999;
    .el-col {
      text-align: left;
      span {
        margin-left: 10px;
        font-size: 18px;
        display: inline-block;
      }
    }
  }
  .formInline {
    .formBtn {
      width: 100%;
      height: 70px;
      border-top: 1px solid #dddddd;
      position: relative;
      .btnPosition {
        position: absolute;
        right: 0px;
        top: 18px;
      }
    }
  }
}
.btn {
  color: #37a1fb;
}
.text-block {
  color: #000;
}
</style>                     